<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>5-1 setup 方法</title>
</head>
<body>
<div id="app">
  <div>{{ person.name }}</div>
  <person :person="person" gender='male' @emit-callback='emitCallback'>
    <template #one>
      slot-one
    </template>
  </person>
</div>
<script src="../lib/vue.global.js" type="text/javascript"></script>
<script>
  const { createApp } = Vue

  const person = {
    props: {
      person: {
        type: Object
      }
    },
    setup(props, ctx) {
      console.log("props", props.person)
      console.log("ctx", ctx)

      // 解构 ctx
      const {attrs, slots, emit} = ctx
      console.log("attrs", attrs)
      console.log("slots", slots.one)
      console.log("emit", emit)
      emit('emit-callback')

      const {person} = props
      console.log(person)
      person.name = 'i am ' + person.name
    },
    template: `
      <div>
        <ul>
          <li>{{ person.name }}</li>
          <li>{{ person.age }}</li>
          <li>{{ person.gender }}</li>
          <li><slot name='one'></slot></li>
        </ul>
      </div>`
  }
  const app = createApp({
    components: {
      person
    },
    data() {
      return {
        person: {
          name: 'john',
          age: 11,
          gender: 'male'
        }
      }
    },
    methods: {
      emitCallback() {
        console.log('emit-callback')
      }
    }
  })
  const vm = app.mount('#app')
</script>
</body>
</html>
